<template>
	<view class="container">
		<!-- 搜索框区域 -->
		<view class="search-container" :class="{ 'search-dark': isDarkMode }">
			<view class="search-box">
				<i class="fa fa-search search-icon"></i>
				<input type="text" placeholder="搜索题目..." v-model="searchKeyword" class="search-input"
					:placeholder-class="isDarkMode ? 'placeholder-dark' : ''" />
				<button class="clear-btn" @click="clearSearch">
					<i class="fa fa-times"></i>
				</button>
			</view>
		</view>

		<!-- 主内容区 -->
		<view class="main-content" :class="{ 'dark-mode': isDarkMode }">
			<view class="questions-container">
				<!-- 无结果提示 -->
				<view class="no-result" v-if="searchKeyword && filteredQuestions.length === 0">
					<i class="fa fa-search-minus"></i>
					<text>未找到匹配的题目</text>
				</view>

				<!-- 题目列表 -->
				<view class="question-card" v-for="(item, index) in filteredQuestions" :key="index">
					<!-- 题目头部 -->
					<view class="question-header">
						<view class="question-number primary-bg primary-color">
							{{ index + 1 }}
						</view>
						<text class="question-text">{{ item.question }}</text>
					</view>

					<!-- 题目内容 -->
					<view class="question-answer">
						<view class="answer-label">答案：</view>
						<text class="answer-text">{{ item.answer }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentCategory: {},
				isDarkMode: false,
				category: '',
				searchKeyword: '',
				filteredQuestions: []
			};
		},
		onLoad(options) {
			console.log(options, 'options');
			this.getDetail(options.id)
		},
		methods: {
			async getDetail(id) {
				if (!id) return
				let result = await this.$axios('overallSituation', {
					databaseName: 'interviewDetail',
					state: 'look',
					queryId: id
				})
				if (result.code == 200) {
					this.filteredQuestions = result.data || []
				}
			}
		}
	};
</script>

<style scoped>
	/* 全局样式 */
	.container {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
	}

	/* 搜索框样式 */
	.search-container {
		padding: 16px;
		background-color: #ffffff;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
		position: sticky;
		top: 0;
		z-index: 900;
	}

	.search-dark {
		background-color: #1e293b;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	}

	.search-box {
		display: flex;
		align-items: center;
		background-color: #f1f5f9;
		border-radius: 8px;
		padding: 10px 16px;
		position: relative;
	}

	.search-dark .search-box {
		background-color: #334155;
	}

	.search-icon {
		color: #64748b;
		margin-right: 10px;
		font-size: 16px;
	}

	.search-input {
		flex: 1;
		background-color: transparent;
		border: none;
		outline: none;
		font-size: 14px;
		color: #334155;
		min-height: 20px;
	}

	.search-dark .search-input {
		color: #e2e8f0;
	}

	.placeholder-dark {
		color: #94a3b8;
	}

	.clear-btn {
		background-color: transparent;
		border: none;
		color: #64748b;
		width: 24px;
		height: 24px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.clear-btn:hover {
		background-color: rgba(0, 0, 0, 0.05);
	}

	/* 搜索结果提示 */
	.search-result-hint {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12px 16px;
		font-size: 14px;
		color: #64748b;
		border-bottom: 1px solid #e2e8f0;
	}

	.dark-mode .search-result-hint {
		color: #94a3b8;
		border-bottom-color: #334155;
	}

	.reset-search {
		background-color: transparent;
		border: none;
		color: #3b82f6;
		font-size: 14px;
		padding: 4px 8px;
		border-radius: 4px;
	}

	.reset-search:hover {
		background-color: rgba(59, 130, 246, 0.1);
	}

	/* 主内容区样式 */
	.main-content {
		flex: 1;
		background-color: #f8fafc;
		transition: background-color 0.3s ease;
	}

	.dark-mode {
		background-color: #0f172a;
		color: #ffffff;
	}

	/* 无结果提示 */
	.no-result {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 60px 20px;
		color: #94a3b8;
		text-align: center;
	}

	.no-result i {
		font-size: 48px;
		margin-bottom: 16px;
		opacity: 0.5;
	}

	/* 面试题详情样式 */
	.questions-container {
		max-width: 1000px;
		margin: 0 auto;
		padding: 16px;
	}

	/* 题目卡片样式 - 增加层级感 */
	.question-card {
		background-color: #ffffff;
		border-radius: 12px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
		padding: 20px;
		margin-bottom: 16px;
		transition: transform 0.2s ease, box-shadow 0.2s ease;
	}

	.question-card:hover {
		transform: translateY(-2px);
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
	}

	.dark-mode .question-card {
		background-color: #1e293b;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
	}

	/* 题目头部 */
	.question-header {
		display: flex;
		align-items: flex-start;
		margin-bottom: 16px;
	}

	.question-number {
		width: 28px;
		height: 28px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		margin-right: 12px;
		flex-shrink: 0;
		font-size: 14px;
	}

	.question-text {
		font-size: 1.1rem;
		font-weight: 600;
		line-height: 1.5;
	}

	/* 答案部分 */
	.question-answer {
		padding-left: 40px;
		/* 与题号对齐 */
	}

	.answer-label {
		font-weight: 600;
		color: #3b82f6;
		margin-bottom: 8px;
		display: inline-block;
	}

	.answer-text {
		font-size: 0.95rem;
		color: #64748b;
		line-height: 1.7;
	}

	.dark-mode .answer-text {
		color: #94a3b8;
	}

	/* 颜色定义 */
	.primary-color {
		color: #3b82f6;
	}

	.primary-bg {
		background-color: rgba(59, 130, 246, 0.1);
	}
</style>